<template>
    <div class="UserLogin">
        <div class="floater"></div>
        <div class="content">
            <div class="MainTitle">
                Kuser社区
            </div>
            <div class="userLogin_comp">
                <div class="login">
                    <input type="text" v-model.lazy.trim="username" placeholder="用户名"/>
                </div>
                <div class="login">
                    <input type="password" v-model.trim="password" placeholder="密码"/>
                </div>
                <div class="login_submit">
                    <input type="submit" value="登录" @click="loginSubmit">
                    <input type="submit" value="注册" @click="toUserRegister"/>
                </div>
                <span class="errTip" ref="tip">{{err}}</span>
            </div>
        </div>
    </div>
</template>
<script>

  import { login } from '../api/config'
  export default {
    name: 'userLogin_comp',
    data: function () {
      return {
        username: '',
        password: '',
        err:""
      }
    },
    created: function () {
    }, // 创建时
    beforeMount: function () {
    }, // 挂载之前
    mounted: function () {
      //this.$bus.$emit('dialog',{show:true,message: 'Login'})
    }, // 挂载之后
    beforeUpdate: function () {
    }, // 数据更新时调用,在渲染之前
    updated: function () {
    }, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {
    }, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {
    }, // 实例销毁后调用
    methods: {
      loginSubmit () {
        if (this.err) {
          login({ username: this.username, password: this.password }).then(function ({ data }) {
            if (data.success) {
              alert('登录成功')
            } else {
              this.err=data.errMsg
            }
          }).catch(function (err) {
            console.log(err)
          })
        }
      },
      toUserRegister () {
        this.$router.push('Register')
      }
    }
    /*,// 函数
    computed: {
      submitStatus () {
        return this.username && this.password && !this.usernameTip && !this.passwordTip
      }
    },
    watch: {
      username: function (val) {
        checkUsername({ username: val }).then(({ data }) => {
          this.usernameTip = ''
          if (data.canUse == false) {
            this.usernameTip = '用户名已存在'
          }
        }).catch(function (err) {
          console.log(err)
        })
      },
      password (val) {
        if (val.length < 8) {
          this.passwordTip = '密码长度不足8位'
        } else if (!/^[a-zA-Z]+$/.test(val)) {
          this.passwordTip = '密码只能为英文大小写字母'
        } else {
          this.passwordTip = ''
        }
      }
    }*/
  }
</script>
<style>
    .UserLogin{
        box-sizing: border-box;
        text-align: center;
        width: 100%;
        height: 100%;
    }
    .floater{
        height: 50%;
        margin-bottom: -6rem;
    }
    .content{
        height: 12rem;
    }
    .MainTitle{
        font-size: 1.5rem;
        font-weight:bold;
    }
    .userLogin_comp {
        box-sizing: border-box;
        background: #f0ffff33;
        text-align: center;
        height: 8rem;
        width: 12rem;
        margin: 2rem auto;
        padding: 1rem;
    }

    .errTip {
        color: red;
        display: inline-block;
        font-size: 0.5rem;
    }

    .login input {
        width: 7rem;
        padding: 0.3rem;
        border: 0.05rem skyblue solid;
        border-radius: 0.2rem;
        outline: none;
        margin: 0.3rem;
    }
    
    .login_submit input {
        width: 3rem;
        height: 1rem;
        color: white;
        border: none;
        background: #1ba092;
        outline: none;
        margin: 0 0.5rem;
        border-radius: 0.2rem;
    }
    .submit input:hover{
        background: #187ea0;
    }
</style>
